<template>
	<view class="gameInfo">
		<view class="game-image">
			<image :src="productDetail.cover_image" mode="widthFix"></image>
		</view>

		<view class="infos">
			<view class="tit">
				{{productDetail.name}}
			</view>
			<view class="des">
				{{productDetail.description}}
			</view>

			<view class="option">
				<view class="pir">
					<text class="xj">
						<text style="font-size: 12px;">￥</text>{{productDetail.price}}
					</text>
					<text class="yj">
						￥{{productDetail.original_price}}
					</text>
				</view>
				<view class="share">
					<view class="shareItem">
						<view class="icons">
							<uni-icons type="redo-filled" size="18"></uni-icons>
						</view>
						<view class="name">
							分享
						</view>
					</view>

					<view class="shareItem">
						<view class="icons">
							<uni-icons type="heart-filled" size="18"></uni-icons>
						</view>
						<view class="name">
							收藏
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="game-content">
			<view class="tit">
				商品详情
			</view>
			<view class="contents">
				<mp-html :content="productDetail.details" />
			</view>
		</view>

		<view class="footer-btn">
			<view class="home-btn" @click="gotoHome">
				返回首页
			</view>
			<view class="shop-btn" @click="getShop">
				立即购买
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="shopBox">
				<view class="shopBox-tit">
					<text>商品详情</text>
					<text class="close" @click="getClose">关闭</text>
				</view>
				<view class="shopInfo">
					<view class="shopImage">
						<image :src="productDetail.cover_image" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="option">
							<text class="pir">￥{{aggregate}}</text>
							<text class="xl">销量：{{productDetail.total_orders}}</text>
						</view>
						<view class="yx">
							已选：{{modelValue}}件
						</view>
					</view>
				</view>
				<view class="shopNum">
					<view class="num-tit">
						数量
					</view>
					<view class="nums">
						<uni-number-box @change="changeValue" v-model="modelValue" :min="1" :max="99" />
					</view>
				</view>
				<view class="shopBtn" @click="subOrder()">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getProductDetail
	} from '@/api/shop/shop.js'
	export default {
		data() {
			return {
				productDetail: {
					id:null,
					cover_image: "",
					name: "",
					description: "",
					original_price: "",
					price: "",
					details: "",
					total_orders: 0
				},
				modelValue: 1
			}
		},
		onLoad(option) {
			const {
				id
			} = option;
			this.getProductDetailData(id)
		},
		computed:{
			aggregate(){
				return (Number(this.productDetail.price)*this.modelValue).toFixed(2)
			}
		},
		methods: {
			// 获取商品详情
			async getProductDetailData(id) {
				try {
					const res = await getProductDetail({
						product_id: id
					})
					this.productDetail = res.data
				} catch (error) {
					throw Error(error)
				}
			},
			getShop() {
				this.$refs.popup.open()
			},
			changeValue(value) {
				this.modelValue = value
			},
			gotoPath(url) {
				uni.navigateTo({
					url
				})
			},
			gotoHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			subOrder(){
				uni.navigateTo({
					url:`/pages/submitOrder/submitOrder?id=${this.productDetail.id}&num=${this.modelValue}`
				})
				this.modelValue = 1;
				this.$refs.popup.close()
			},
			
			getClose(){
				this.$refs.popup.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	.gameInfo {
		padding-bottom: 150rpx;

		.game-image {
			height: 700rpx;
			width: 100%;
		}

		.infos {
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #fff;

			.tit {
				font-size: 32rpx;
				font-weight: 700;
			}

			.des {
				color: #999;
				font-size: 25rpx;
				margin: 20rpx 0px;
				padding-bottom: 20rpx;
				border-bottom: 1px #f9f9f9 solid;
			}

			.option {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.pir {
					.xj {
						color: red;
						margin-right: 10rpx;
						font-size: 40rpx;
					}

					.yj {
						color: #999;
						text-decoration: line-through;
						font-size: 26rpx;
					}
				}

				.share {
					display: flex;
					align-items: center;
					gap: 10px;
					font-size: 24rpx;
					color: #444;

					.shareItem {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}

		.game-content {
			margin-top: 20rpx;
			background-color: #fff;

			.tit {
				height: 80rpx;
				line-height: 80rpx;
				padding: 0px 20rpx;
				font-size: 28rpx;
				font-weight: 700;
			}

			.contents {
				box-sizing: border-box;
				padding: 20rpx;
				padding-top: 0px;
				font-size: 24rpx;
				line-height: 1.8;
				color: #444;
			}
		}

		.footer-btn {
			position: fixed;
			bottom: 0px;
			left: 0px;
			width: 100%;
			background-color: #fff;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 30rpx;
			gap: 10px;

			.home-btn {
				flex: 1;
				text-align: center;
				border: 1px red solid;
				height: 80rpx;
				line-height: 80rpx;
				color: red;
				border-radius: 120rpx;
			}

			.shop-btn {
				flex: 1;
				height: 80rpx;
				background-color: red;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 120rpx;
			}
		}

		.shopBox {
			box-sizing: border-box;
			padding: 30rpx;
			border-top-right-radius: 16rpx;
			border-top-left-radius: 16rpx;
			overflow: hidden;

			.shopBox-tit {
				font-size: 28rpx;
				font-weight: 700;
				margin-bottom: 30rpx;
				color: #444;
				display: flex;
				justify-content: space-between;
				.close{
					font-weight: 400;
					color: #999;
				}
			}

			.shopInfo {
				display: flex;
				align-items: center;

				.shopImage {
					width: 160rpx;
					height: 160rpx;
					font-size: 0px;
					margin-right: 20rpx;
					border-radius: 4px;
					overflow: hidden;
				}

				.info {
					.option {
						margin-bottom: 30rpx;

						.pir {
							color: red;
							margin-right: 20rpx;
							font-size: 36rpx;
						}

						.xl {
							color: #999;
							font-size: 24rpx;
						}
					}

					.yx {
						font-size: 28rpx;
					}
				}
			}

			.shopNum {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 30rpx 0px;
				.num-tit{
					font-size: 26rpx;
				}
			}

			.shopBtn {
				background-color: red;
				color: #fff;
				text-align: center;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 8rpx;
			}
		}
	}
</style>